<template>
  <div>
    <div class="song-cls">
      <div class="song-cls-item">
        <div class="collect" @click="shocgd(playlist)">
          <i class="iconfont icon-tianjia" v-show="!playlist.subscribed"> </i>
          <i class="iconfont icon-chenggong" v-show="playlist.subscribed"> </i>
          <span>{{
          playlist.subscribedCount |playCountData
          
          }}</span>
        </div>

        <div class="leaveWord" @click="
          $router.push({
            path: '/comments',
            query: {
              playlist: playlist,
            },
          })
        ">
          <i class="iconfont icon-liuyan"> </i>

          <span>{{
          playlist.commentCount |playCountData
          
          }}</span>
        </div>
        <div class="share">
          <i class="iconfont icon-fenxiang"> </i>
          <span>{{
            playlist.shareCount |playCountData
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getsongListForCollection } from "@/api/songitem";
export default {
  props: ["playlist"],
  data() {
    return {
     
    };
  },
  //播放量转换单位
  filters: {
    playCountData(value) {
      let val = Math.floor(value / 1000);
      let w = value > 10000 ? val / 10 + "万" : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : w; //亿计算
      return y;
    },
  },
  methods: {
    shocgd(playlist) {
      console.log(playlist);
      if (!playlist.subscribed) {
        getsongListForCollection(1, this.$route.query.id)
        this.$set(playlist, playlist.subscribed, playlist.subscribed=true)
      } else {
      
        getsongListForCollection(2, this.$route.query.id)
        this.$set(playlist, playlist.subscribed, playlist.subscribed = false)
      }
    },
  },
  mounted() {
    console.log(this.playlist);
  },
};
</script>

<style lang="scss" scoped>
// 歌单留言评论分享样式
.song-cls {
  width: 70%;
  height: 40px;
  background-color: #fff;
  margin: 0 auto;
  position: absolute;
  left: 15%;
  right: 15%;
  margin-top: -20px;
  border-radius: 30px;
  border: 1px solid #ccc;
  .song-cls-item {
    display: flex;
    text-align: center;
    width: 100%;
    font-size: 16px;

    span {
      padding-left: 3px;
      font-size: 14px;
    }

    // 收藏
    .collect {
      margin-top: 13px;
      flex: 1;
    }

    // 留言
    .leaveWord {
      flex: 1;
      margin-top: 13px;
      border-left: 1px solid #ccc;
    }

    // 分享
    .share {
      flex: 1;
      margin-top: 13px;

      border-left: 1px solid #ccc;
    }
  }
}

</style>